<template>
  <el-table :data="tableData" border :span-method="arraySpanMethod">
    <el-table-column
      v-for="(item, index) in tableHeader"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :align="typeof item.align !== 'undefined' ? item.align : 'center'"
      :width="typeof item.width !== 'undefined' ? item.width : ''"
    />
    <el-table-column
      v-if="expertRating.length > 0"
      label="专家评分"
      align="center"
    >
      <el-table-column
        v-for="(item, index) in expertRating"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :align="typeof item.align !== 'undefined' ? item.align : 'center'"
        :width="typeof item.width !== 'undefined' ? item.width : '140'"
      />
    </el-table-column>
    <!--    操作-->
    <el-table-column
      v-for="(item, index) in operation"
      :key="index + 1 + tableHeader.length"
      :prop="item.prop"
      :label="item.label"
      :align="typeof item.align !== 'undefined' ? item.align : 'center'"
      :width="typeof item.width !== 'undefined' ? item.width : '200'"
    >
      <template v-slot:default="scope">
        <div v-if="item.type === 'inputText' && myDisabled" class="bg-red">
          <el-input
            v-model="scope.row[item.prop]"
            :placeholder="
              item.placeholder ? item.placeholder : '请输入' + item.label
            "
            clearable
            :style="{ width: item.width ? item.width : '150px' }"
            @keyup.enter.native="item.keydown ? item.keydown : () => {}"
          />
        </div>
        <!--      输入框-->

        <!--      简单显示-->
        <span v-else>{{ scope.row[item.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: 'MyTableReport',
  props: {
    // 列信息
    tableHeader: {
      type: Array,
      default: () => [
        { label: `一级指标`, prop: 'id1' },
        { label: `一级指标分值`, prop: 'id2' },
        { label: `二级指标`, prop: 'id3' },
        { label: `二级指标分值`, prop: 'id4' },
        { label: `三级指标`, prop: 'id5' },
        { label: `三级指标分值`, prop: 'id6' },
        { label: `指标内容`, prop: 'id7' },
        { label: `指标分值`, prop: 'id8' },
        { label: `评估方式`, prop: 'id9' },
        { label: `参考依据`, prop: 'id10' },
        { label: `评估方式与信息采集`, prop: 'id11', width: '140' },
        { label: `解释说明`, prop: 'id12' },
        { label: `园所自评`, prop: 'id13' }
      ]
    },
    // 专家
    expertRating: {
      type: Array,
      default: () => []
    },
    // 操作
    operation: {
      type: Array,
      default: () => []
    },
    // 数据
    tableData: {
      type: Array,
      default: () => [
        {
          id1: `4 办托条件`,
          id2: '100',
          id3: '4.1 办托条件',
          id4: '32',
          id5: '4.1.1 营业执照',
          id6: '10',
          id7: '应取得提供托 育服务的营业 执照',
          id8: '10',
          id9: '查阅资料',
          id10: '国家卫生健康委、 中央编办、民政 部、市场监督总局 《托育机构登记 和备案办法(试 行)》(国卫办人 口发〔2019〕25 号)',
          id11: '查阅资料：营业执照（营业范围中明确注明“托育服务”或“3岁以下婴幼儿照护服务”）',
          id12: '指标说明:营业范围中应明确注明“托育服务”或“3 岁以下婴幼儿照护 服务”。 评分说明: 该指标达到，得 10 分;没有达到，不得分。',
          id13: '10'
        },
        {
          id1: `4 办托条件`,
          id2: '100',
          id3: '4.1 办托条件',
          id4: '32',
          id5: '4.1.1 营业执照',
          id6: '10',
          id7: '应取得提供托 育服务的营业 执照',
          id8: '10',
          id9: '查阅资料',
          id10: '国家卫生健康委、 中央编办、民政 部、市场监督总局 《托育机构登记 和备案办法(试 行)》(国卫办人 口发〔2019〕25 号)',
          id11: '查阅资料：营业执照（营业范围中明确注明“托育服务”或“3岁以下婴幼儿照护服务”）',
          id12: '指标说明:营业范围中应明确注明“托育服务”或“3 岁以下婴幼儿照护 服务”。 评分说明: 该指标达到，得 10 分;没有达到，不得分。',
          id13: '10'
        },
        {
          id1: `4 办托条件`,
          id2: '100',
          id3: '4.1 办托条件',
          id4: '32',
          id5: '4.1.1 营业执照',
          id6: '10',
          id7: '应取得提供托 育服务的营业 执照',
          id8: '10',
          id9: '查阅资料',
          id10: '国家卫生健康委、 中央编办、民政 部、市场监督总局 《托育机构登记 和备案办法(试 行)》(国卫办人 口发〔2019〕25 号)',
          id11: '查阅资料：营业执照（营业范围中明确注明“托育服务”或“3岁以下婴幼儿照护服务”）',
          id12: '指标说明:营业范围中应明确注明“托育服务”或“3 岁以下婴幼儿照护 服务”。 评分说明: 该指标达到，得 10 分;没有达到，不得分。',
          id13: '10'
        }
      ]
    },
    // 合并的行和列
    myArraySpanMethod: {
      type: Function,
      default: (row, column, rowIndex, columnIndex) => {
        return [1, 1]
      }
    },
    // 编辑
    myDisabled: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {}
  },
  methods: {
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      return this.myArraySpanMethod(row, column, rowIndex, columnIndex)
    }
  }
}
</script>

<style scoped lang="scss"></style>
